<template>
  <div class="address-box">
    <div class="add-address">
      <el-button type="warning" @click="addressShow = true">添加收货地址</el-button>
    </div>
    <div class="list" v-if="addressList.length > 0">
      <div class="list-item" v-for="(item, index) in addressList" :key="index">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <el-button style="float: right;" type="danger" @click="deleteAddress(item.id)">删除收货地址</el-button>
          </div>
          <!-- <el-divider content-position="left">收货人</el-divider>
          <span>{{item.consigneeName}}</span>
          <el-divider content-position="left">收货手机号</el-divider>
          <span>{{item.consigneePhone}}</span>
          <el-divider content-position="left">收货地址</el-divider>
          <span>{{item.address}}</span>
          <el-divider content-position="left">地址编号</el-divider>
          <span>{{item.id}}</span> -->
          <p>收货人：{{item.consigneeName}}</p>
          <p>收货手机号：{{item.consigneePhone}}</p>
          <p>收货地址：{{item.address}}</p>
        </el-card>
      </div>
    </div>
    <show-no-data v-else></show-no-data>
    <el-dialog title="添加收货地址" :visible.sync="addressShow" width="60%">
      <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
        <el-form-item label="收货人姓名" prop="nickName">
          <el-input size="small" v-model="editForm.consigneeName" auto-complete="off" placeholder="请输入收货人姓名"></el-input>
        </el-form-item>
        <el-form-item label="收货人手机号" prop="phone">
          <el-input size="small" v-model="editForm.consigneePhone" auto-complete="off" placeholder="请输入收货人手机号"></el-input>
        </el-form-item>
        <el-form-item label="收货地址" prop="password">
          <el-cascader
            size="small"
            :options="options"
            v-model="selectedOptions"
            @change="handleChange"
          >
          </el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary"  @click="submitForm">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import ShowNoData from "components/nodata/ShowNoData"
import { regionData, CodeToText } from "element-china-area-data"
export default {
  name: 'addressBox',
  components: {
    ShowNoData
  },
  computed: {
    ...mapState(['user'])
  },
  data () {
    return {
      gg: '',
      addressShow: false, // 添加收货地址tankuang
      addressList: [],
      options: regionData,
      selectedOptions: [],
      editForm: {
        userId: '',
        address: '',
        consigneeName: '',
        consigneePhone: ''
      },
      // rules表单验证
      rules: {
        consigneeName: [{ required: true, message: '请输入收货人', trigger: 'blur' }],
        consigneePhone: [{ required: true, message: '请输入收货人手机号', trigger: 'blur' }]
      },
    }
  },
  created () {
    this.getAddressList()
  },
  methods: {
    /**
     * 
     */
    closeDialog () {
      this.addressShow = false
    },
    /**
     * 保存新增收货地址
     */
    submitForm () {
      this.addressShow = false
      this.editForm.userId = this.user.id
      this.$api.cart.addAddress(this.editForm).then(res => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '添加收货地址成功'
          })
          this.getAddressList()
        }
      })
    },
    /**
     * 获取收货地址
     */
    getAddressList () {
      let query = {
        userId: this.user.id
      }
      this.$api.cart.getAddressList(query).then(res => {
        if (res.code === 200) {
          this.addressList = res.data
        }
      })
    },
    /**
     * 删除收货地址
     */
    deleteAddress (id) {
      let params = {
        id: id
      }
      this.$api.cart.deleteAddress(params).then(res => {
        if (res.code === 200) {
          this.getAddressList()
        }
      })
    },
    /**
     * 操作级联 城市数据
     */
    handleChange() {
      let loc = "";
      for (let i = 0; i < this.selectedOptions.length; i++) {
        loc += CodeToText[this.selectedOptions[i]];
      }
      this.editForm.address = loc
    }
  }
}
</script>
<style lang="scss" scoped>
.address-box{

}
 .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
.add-address{
  margin: 30px auto;
  padding: 0 43px;
}
.list {
  padding: 0 43px;
  width: 80%;
  margin: 30px auto;
  background-color: #fff;
}
.list-item{
  width: 50%;
  margin: 10px auto;
  p {
    line-height: 25px;
    color: #666666;
    font-size: 16px;
  }
}
</style>
